<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../common/css/animate.min.css">
  <link rel="stylesheet" href="../common/css/bootstrap.css">
  <link rel="stylesheet/less" href="../common/css/reset.less">
  <link rel="stylesheet/less" href="../common/css/common.less">
  <link rel="stylesheet/less" href="./index.less">
  <style> 
    .active {
      color: #ff4b4b;
      background-color: #fff;
    }
  </style>
  <title>Document</title>
</head>
<body>
  <div class="box">
    <!-- 头部 -->
    <a href="../index/index.html" class="title">
      <div class="left">
        <img src="../common/images/back_icon.png" alt="">
        <span>返回</span>
      </div>
      <div class="center">
        18K 金钻石戒
      </div>
      <div class="right">
        <img src="../common/images/other_icon.png" alt="">
      </div>
    </a>
    <!-- 大图 -->
    <div class="big_img">
      <img class="img" src="../common/images/detail_img.png" alt="">
      <img class="shadow" src="../common/images/detail_shadow.png" alt="">
    </div>
    <!-- 商品详情 -->
    <div class="detail_box">
      <!-- 介绍 -->
      <div class="introduce">
        <div class="left">
          <p>【模板】 18k 金钻石戒指</p>
          <p>飽滿的圓形戒托綴以多顆閃耀的美鑽，環抱著瑰麗耀眼的主石，把鑽石晶瑩剔透的光澤無限地放大，猶如情人以雙手把妳抱在懷中，讓無微不至的呵護一直圍繞著妳。</p>
        </div>
        <div class="right">
          <div class="shoucang">
            <img src="../common/images/detail_star.png" alt="">
            <span>收藏</span>
          </div>
        </div>
      </div>
      <!-- 购买 -->
      <div class="buy">
        <div class="left">
          <p class="price">微信价：10000</p>
          <div class="maked">
            <span>镶嵌材质</span>
            <div>
              <span>18k 白金镶嵌</span>
              <img src="../common/images/detail_sj.png" alt="">
            </div>
          </div>
          <div class="num">
            <div class="dv1">
              <p>数量</p>
              <p>（剩余13621）</p>
            </div>
            <div class="dv2">
              <button class="inc">+</button>
              <div class="value">1</div>
              <button class="dec">-</button>
            </div>
          </div>
          <div class="freight">
            <span>快递 &nbsp; 免运费</span>
          </div>
        </div>
        <div class="right">
          <p>销量（<span>455</span>）件</p>
          <div class="btn">
            <a href="#">加入购物车</a>
          </div>
          <div class="btn">
            <a href="#">我要帮购</a>
          </div>
          <div class="btn">
            <a href="#">立即购买</a>
          </div>
        </div>
      </div>
      <div class="line">
        <img src="../common/images/line.png" alt="">
      </div>
    </div>
    <!-- 商品信息 -->
    <div class="goods_mg">
      <div class="dvs">
        <div class="dv active">商品属性</div>
        <div class="dv">图文详细</div>
        <div class="dv">评价(120)</div>
      </div>
      <div class="items">
        <div class="item1" style="display: block;">商品属性模块</div>
        <div class="item1">图文详细模块</div>
        <div class="item1">评价模块</div>
      </div>
    </div>
  </div>  <!-- box -->

  <script src="../common/js/jquery-3.6.0.js"></script>
  <script>
    $(document).ready(function() {
      $('.dvs .dv').click(function() {
        var idx = $(this).index();
        $(this).addClass('active').siblings().removeClass('active')
        // $('.item1').css('display', 'none')
        $('.items').find('.item1').eq(idx).show().siblings().hide()
      })
    })
  </script>
  <script src="../common/js/bootstrap.min.js"></script>
  <script src="../common/js/wow.min.repeat.js"></script>
  <script src="../common/js/common.js"></script>
  <script src="../common/js/less.min.js"></script>
</body>
</html>